<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            margin-bottom: 40px;
        }
    </style>
</head>

<body>

    <div id="app">

        <!-- 
            默认情况下 v-model 在text 和 textarea 元素使用 value 属性 和 input 事件；
                添加.lazy修饰符之后, 在text 和 textarea 元素使用 value 属性 和 change 事件；
         -->
        <div class="wrap">
            <h2>v-model修饰符</h2>
            <p>
                <!-- <input type="text" v-model="msg"> -->
                <input type="text" v-model.lazy="msg">
            </p>
            <p>msg: {{msg}}</p>
        </div>


        <!-- 
            .number  自动将用户的输入值转为数值类型 (一般建议配合 type="number"使用)


            如果type="text"
                1. 先输入数字, 在输入非数字 => 会在失焦时, 将非数字过滤掉
                2. 先输入非数字 => 原样输出, 不会转化为数值类型


         -->
        <div class="wrap">
            <h2>v-model修饰符 .number</h2>
            <p>
                <input type="number" v-model.number="num">
            </p>
            <p>num: {{num}}---{{typeof num}}</p>
            <p>num+1: {{num+1}}---{{typeof num}}</p>
        </div>



        <!-- 


            .trim()  自动过滤用户输入的首尾空白字符
                1. 取值时自动过滤用户输入的首尾空白字符
                2. 失焦后 将首尾空格去除
         -->
        
        
        <div class="wrap">
            <h2>v-model修饰符 ..trim</h2>
            <p>
                <input type="text" v-model.trim="info">
            </p>
            <!-- white-space: pre; 标签内保留换行和空格 -->
            <p style="white-space: pre;">info: <span style="background-color: pink;">{{info}}</span></p>
        </div>








    </div>
</body>
<script>

    /* 
        双向数据绑定
            1. 数据监听 当数据改变后,  重新更新视图
            2. DOM监听  当视图内容改变后,也会将其更新到数据    


        v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，

        v-model 会自动根据控件类型, 自动选取正确的属性和方法来更新元素
        v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

            text 和 textarea 元素使用 value 属性 和 input 事件；
            checkbox 和 radio 使用 checked 属性 和 change 事件；
            select 字段将 value 作为 prop 并将 change 作为事件。

       
    */




    var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
            num: "",

            info:"",



        },
        methods: {

        }

    })

</script>

</html>